<!-- 物业公司详情 -->
<template>
	<div class="">
		<el-dialog title="物业公司详情列表" :visible.sync="dialogVisible" width="800px" top="0px" :before-close="handleClose" :close-on-click-modal="false">
			<div class="info-title">公司名称：{{data.wy_name}}</div>
			<div class="el-dialog-view">
				<el-tabs v-model="activeName" @tab-click="getData()">
					<el-tab-pane label="小区详情" name="1">
						<el-table :data="list" style="width: 100%">
							<el-table-column prop="xq_name" label="小区名称"></el-table-column>
							<el-table-column prop="address" label="小区地址"></el-table-column>
							<el-table-column prop="createtime" label="创建时间"></el-table-column>
							<el-table-column label="状态">
								<template slot-scope="scope">
									<el-tag v-if="scope.row.state == 1">正常</el-tag>
									<el-tag v-else-if="scope.row.state == 2" type="info">关闭</el-tag>
								</template>
							</el-table-column>
						</el-table>
					</el-tab-pane>
					<el-tab-pane label="公司企业号" name="2">
						<el-form ref="form" :model="form" label-width="120px" style="width: 600px;">
						  <el-form-item label="授权企业名称">
						    <el-input v-model="form.corp_name"></el-input>
						  </el-form-item>
						  <el-form-item label="授权微信名称">
						    <el-input v-model="form.name"></el-input>
						  </el-form-item>
						  <el-form-item label="授权人姓名">
						    <el-input v-model="form.name"></el-input>
						  </el-form-item>
						  <el-form-item label="授权人联系电话">
						    <el-input v-model="form.mobile"></el-input>
						  </el-form-item>
						  <el-form-item label="授权人邮箱">
						    <el-input v-model="form.email"></el-input>
						  </el-form-item>
						  <el-form-item label="授权时间">
						    <el-input v-model="form.createtime"></el-input>
						  </el-form-item>
						  <el-form-item label="认证到期时间">
						    <el-input v-model="form.verified_end_time"></el-input>
						  </el-form-item>
						
						</el-form>
					</el-tab-pane>
					<el-tab-pane label="物业后台用户" name="3">
						<el-table :data="list" style="width: 100%">
							<el-table-column prop="username" label="用户账号"></el-table-column>
							<el-table-column prop="real_name" label="用户真实姓名"></el-table-column>
							<el-table-column label="用户权限">
								<template slot-scope="scope">
									{{userType[scope.row.user_type]}}
								</template>
							</el-table-column>
							<el-table-column prop="mailbox" label="用户邮箱"></el-table-column>
							<el-table-column prop="createtime" label="创建时间" width="100px"></el-table-column>
							<el-table-column label="状态">
								<template slot-scope="scope">
									<el-tag v-if="scope.row.state == 1">正常</el-tag>
									<el-tag v-else-if="scope.row.state == 2" type="info">关闭</el-tag>
								</template>
							</el-table-column>
						</el-table>
					</el-tab-pane>
					<!-- <el-tab-pane label="物业企业用户" name="4">
						<el-table :data="list" style="width: 100%">
							<el-table-column prop="contacts" label="真实姓名"></el-table-column>
							<el-table-column prop="department_name" label="部门"></el-table-column>
							<el-table-column prop="mobile" label="电话号码"></el-table-column>
							<el-table-column prop="create_time" label="创建时间"></el-table-column>
						</el-table>
					</el-tab-pane> -->
				</el-tabs>
				<div class="el-pagination" v-if="activeName != '2'">
					<el-pagination
						@size-change="handleSizeChange"
						@current-change="handleCurrentChange"
						:current-page="page"
						:page-sizes="[10, 100, 200, 300, 400]"
						:page-size="size"
						layout="total, sizes, prev, pager, next, jumper"
						:total="total"
					></el-pagination>
				</div>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import Api from '@/api/pages/wuye/wuye.js';
export default {
	name: 'wuye-list',
	props: {
		data: Object,
	
	},
	data() {
		return {
			list:[],
			page: 1,
			size: 10,
			total: 0,
			dialogVisible: true,
			activeName: '1',
			itemId: this.data.id,
			form:{},
			userType:{
				'1':'超级管理员',
				'2':'普通管理员'
			}
		};
	},
	mounted() {
		console.log(this.data)
		this.getData();
	},
	methods: {
		handleClose() {
			this.$emit('close');
		},
		getData() {
			Api.info({
				id: this.itemId,
				type: this.activeName
			}).then(res => {
				if (res.state) {
					if(this.activeName == '2') {
						this.form = res.data || {};
					}else{
						this.list = res.data.list;
						this.total = res.data.totalRow;
					}
				} else {
					this.$message(res.msg);
				}
			});
		},
		handleSizeChange(val) {
			console.log(`每页 ${val} 条`);
			this.size = val;
			this.getData();
		},
		handleCurrentChange(val) {
			console.log(`当前页: ${val}`);
			this.page = val;
			this.getData();
		},
	}
};
</script>
<style lang="scss" scoped>
.el-dialog-view {
	padding: 10px 30px;
	border: 1px solid #bbb;
	min-height: calc(100vh - 150px);
}
.info-title{
	font-size: 18px;
	font-weight: 600;
	margin-bottom: 10px;
}
</style>

<style lang="scss">
.dialogVideo {
	.el-dialog__body {
		padding: 20px;
	}
}
</style>
